<template>
  <div class="project-manage">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-input
            v-model="queryParams.manager"
            placeholder="请输入负责人"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="存活状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.AGENT_PROJECT_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
            type="primary"
            plain
            @click="openProjectForm()"
          >
            <Icon icon="ep:plus" class="mr-5px" /> 新增项目
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <div class="project-grid" v-loading="loading">
        <div v-for="project in projectList" :key="project.id" class="project-card">
          <div class="project-header">
            <Icon icon="ep:folder" class="project-icon" />
            <div class="project-status">
              <div class="status-dot" :class="getStatusClass(project.status)"></div>
            </div>
          </div>

          <h3 class="project-name">{{ project.name }}</h3>
          <p class="project-description">{{ project.description }}</p>

          <div class="project-info">
            <div class="info-item">
              <span class="label">版本:</span>
              <span class="value">{{ project.version || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="label">负责人:</span>
              <span class="value">{{ project.manager || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="label">进度:</span>
              <span class="value">{{ project.progress || 0 }}%</span>
            </div>
          </div>

          <div class="project-categories">
            <div class="category-item">
              <Icon icon="ep:document" />
              <span>内容资料</span>
              <el-badge :value="project.contentCount || 0" class="badge" />
            </div>
            <div class="category-item">
              <Icon icon="ep:folder" />
              <span>项目资料</span>
              <el-badge :value="project.resourceCount || 0" class="badge" />
            </div>
            <div class="category-item">
              <Icon icon="ep:chat-dot-round" />
              <span>会议记录</span>
              <el-badge :value="project.meetingCount || 0" class="badge" />
            </div>
            <div class="category-item">
              <Icon icon="ep:cpu" />
              <span>技术文档</span>
              <el-badge :value="project.technicalCount || 0" class="badge" />
            </div>
          </div>

          <div class="project-actions">
            <el-button type="primary" @click="viewProject(project)">
              <Icon icon="ep:view" />查看详情
            </el-button>
            <el-button @click="editProject(project)">
              <Icon icon="ep:edit" />编辑
            </el-button>
            <el-button
              type="danger"
              @click="deleteProject(project)"
            >
              <Icon icon="ep:delete" />删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>

    <!-- 项目表单组件 -->
    <ProjectForm ref="formRef" @success="getList" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {
  ManageProjectApi,
  type ManageProjectVO,
  type ManageProjectPageReqVO
} from '@/api/agent/manage/manageProject'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import ProjectForm from './ProjectForm.vue'

defineOptions({ name: 'ProjectManage' })

const router = useRouter()
const message = useMessage()
const { t } = useI18n()

const loading = ref(true)
const projectList = ref<ManageProjectVO[]>([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 12,
  name: undefined,
  manager: undefined,
  status: undefined
})
const queryFormRef = ref()

// 组件引用
const formRef = ref()

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ManageProjectApi.getManageProjectPage(queryParams)
    projectList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 打开项目表单
const openProjectForm = (project?: ManageProjectVO) => {
  if (project) {
    formRef.value.open('update', project.id)
  } else {
    formRef.value.open('create')
  }
}

// 查看项目详情
const viewProject = (project: ManageProjectVO) => {
  router.push(`/agent/project-manage/project/detail/${project.id}`)
}

// 编辑项目
const editProject = (project: ManageProjectVO) => {
  openProjectForm(project)
}

// 删除项目
const deleteProject = async (project: ManageProjectVO) => {
  try {
    await ElMessageBox.confirm(`确定要删除项目 "${project.name}" 吗？`, '提示', {
      type: 'warning'
    })
    await ManageProjectApi.deleteManageProject(project.id!)
    message.success('删除成功')
    await getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除项目失败:', error)
      message.error('删除项目失败')
    }
  }
}

/** 获取状态样式类 */
const getStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    '进行中': 'online',
    '已完成': 'development',
    '已暂停': 'testing',
    '已取消': 'offline'
  }
  return classMap[status] || 'offline'
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.project-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
  height: auto;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(102, 126, 234, 0.3);
    
    &::before {
      opacity: 1;
    }
  }

  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;

    .project-icon {
      font-size: 48px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 auto;
      filter: drop-shadow(0 1px 3px rgba(102, 126, 234, 0.2));
    }

    .project-status {
      position: absolute;
      top: -6px;
      right: -6px;
      
      .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);

        &.online {
          background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
          animation: pulse-green 2s infinite;
        }

        &.development {
          background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
          animation: pulse-blue 2s infinite;
        }

        &.testing {
          background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
          animation: pulse-orange 2s infinite;
        }

        &.offline {
          background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
          animation: pulse-red 2s infinite;
        }
      }
    }
  }

  .project-name {
    margin: 0 0 12px 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.3;
  }

  .project-description {
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    background: rgba(249, 250, 251, 0.8);
    padding: 8px;
    border-radius: 6px;
    border-left: 2px solid #e5e7eb;
  }

  .project-info {
    margin-bottom: 16px;
    text-align: left;
    background: rgba(248, 250, 252, 0.6);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(229, 231, 235, 0.6);

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      padding: 4px 0;
      border-bottom: 1px solid rgba(229, 231, 235, 0.4);

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .label {
        color: #6b7280;
        font-weight: 500;
        min-width: 60px;
        font-size: 11px;
      }

      .value {
        color: #1f2937;
        font-weight: 600;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
      }
    }
  }

  .project-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;

    .category-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 6px;
      border: 1px solid rgba(203, 213, 225, 0.5);

      .el-icon {
        margin-right: 4px;
        color: #667eea;
        font-size: 14px;
      }
      
      span {
        font-size: 11px;
        font-weight: 500;
        color: #475569;
      }
      
      .badge {
        margin-left: auto;
      }
    }
  }

  .project-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;

    .el-button {
      flex: 1;
      font-weight: 600;
      border-radius: 6px;
      padding: 8px 12px;
      transition: all 0.3s ease;
      font-size: 12px;
      
      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
        }
      }
      
      &.el-button--danger {
        background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
        border: none;
        color: white;
        box-shadow: 0 3px 8px rgba(245, 108, 108, 0.3);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(245, 108, 108, 0.5);
        }
      }
      
      &:not(.el-button--primary):not(.el-button--danger) {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #cbd5e1;
        color: #475569;
        
        &:hover {
          background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(71, 85, 105, 0.15);
        }
      }
    }
  }
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
  }
}

@keyframes pulse-blue {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(64, 158, 255, 0);
  }
}

@keyframes pulse-orange {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(230, 162, 60, 0);
  }
}

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 108, 108, 0);
  }
}
</style>
